<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/base.css">
		<style>
			.topcate{
				z-index: 99999;
			}
			.topcate li{
				float: left;
				width: 20%;
				/* margin-left: 0;
				margin-right: 0; */
				padding-left: 0;
				padding-right: 0;
				text-align: center;
			}
			.topcate li::after{
				display: none;
			}
			.topcate .active{
				color: #ff6464;
				font-weight: 500;
			}
			.topcate .active::after{
				display: block;
				background-color: #ff6464;
				height: 4px;
				position: absolute;
				left: 0;
			}
			
			/* 当前页面内部样式 */
			.db-search{
				margin: .3rem .4rem 0;
			}
			.db-movie-list{
				/* margin-bottom: 1rem; */
				margin-top: 0.85rem;
			}
			.db-movie-list .mui-media-object{
				max-width: 1.4rem;
				width: 1.4rem;
				height: auto;
			}
			.db-movie-list .mui-media-body{
				font-size: .38rem;
				line-height: .5rem;
			}
			.db-movie-list .mui-media-body .mui-ellipsis span{
				color: #ff6464;
			}
		</style>
	</head>

	<body>
		
		<!-- 头部标题 -->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">Top250排行榜</h1>
		</header>
		
		<div class="mui-content" id="app3">
			<!-- 数量划分 -->
			<div class="mui-scroll" style="z-index: 2;">
				<ul class="mui-table-view topcate">
					<li class="mui-table-view-cell active" @tap="changeTop250(1, $event)">1-50</li>
					<li class="mui-table-view-cell" @tap="changeTop250(2, $event)">51-100</li>
					<li class="mui-table-view-cell" @tap="changeTop250(3, $event)">101-150</li>
					<li class="mui-table-view-cell" @tap="changeTop250(4, $event)">151-200</li>
					<li class="mui-table-view-cell" @tap="changeTop250(5, $event)">201-250</li>
				</ul>
			</div>
			
			<!-- 列表 -->
			<div class="mui-scroll">
				<ul class="mui-table-view mui-table-view-chevron db-movie-list">
					<li class="mui-table-view-cell mui-media" v-for="item in movies" :key="item.id" @tap="lookDetail(item.id)">
						<a class="mui-navigate-right">
							<img class="mui-media-object mui-pull-left" :src="item.images.large">
							
							<div class="mui-media-body">
								{{item.title}}
								<p class='mui-ellipsis'>{{item.genres}} <span>{{item.rating.average}}分</span></p>
								<p class='mui-ellipsis'>导演：{{item.directors2}}</p>
								<p class='mui-ellipsis'>主演：{{item.casts2}}</p>
							</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
		
		
		<script src="../js/mui.js"></script>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			mui.init();
			
			let APP = new Vue({
				el: '#app3',
				data: {
					movies: [],
					pn: 1
				},
				methods:{
					changeTop250(cate, e){
						// alert(cate);
						// console.log(e.target);	// 目标对象（也就是点击的li对象）
						
						// console.log(mui('.topcate li'))
						// 所有的li标签，都只加 mui-table-view-cell 这个类名
						for(let i=0; i<mui('.topcate li').length; i++){
							mui('.topcate li')[i].className = 'mui-table-view-cell';
						}
						// 给点击的li对象，添加active 这个类名
						e.target.className = 'mui-table-view-cell active';
						
						APP.pn = cate;
						
						// 再重新调用数据
						getMovies();
						
					}
				}
				
			});
			
			// 查询数据
			let getMovies;
			mui.plusReady(function () {
			    
				 // 定义函数的一种写法
			    getMovies = function(){
			    	
			    	// 显示加载效果
			    	plus.nativeUI.showWaiting('加载中');
			    	
			    	// 请求数据
			    	mui.getJSON('http://t.yushu.im/v2/movie/top250',{
			    		 start: (APP.pn-1)*50,
			    		 count: 50,
			    		 apikey: '0df993c66c0c636e29ecbb5344252a4a'
			    	},function(data){
			    	 // console.log(JSON.stringify(data));
			    	 // 电影总数
			    	 let total = data.total;
			    	 
			    	 let subjects = data.subjects;
			    	 if(subjects.length>0){
			    		
			    		// 对数据subjects进行相关内容的转换，如：剧情、导演、主演
			    		let directors;
			    		let casts;
			    		subjects.map(function(v){
			    			
			    			// 剧情
			    			v.genres = v.genres.join('/');
			    			
			    			// 导演名称
			    			directors = v.directors;
			    			let arr = [];
			    			directors.forEach(function(vv){
			    				// 数组追加
			    				arr.push(vv.name);  //  ["管虎","xxx"]
			    			})
			    			// 增加多一个导演下标
			    			v.directors2 = arr.join('/');
			    			
			    			// 演员名称
			    			casts = v.casts;
			    			let arr2 = [];
			    			casts.forEach(function(vvv){
			    				arr2.push(vvv.name);
			    			})
			    			// 增加多一个演员下标
			    			v.casts2 = arr2.join('/');
			    			
			    			return v;
			    		})
			    		
			    		// console.log(JSON.stringify(subjects));
			    		
			    		
			    		// 赋值
			    		APP.movies = subjects;
			    		
			    	 }
			    	 
			    	 // 隐藏加载效果
			    	 setTimeout(function(){
			    		plus.nativeUI.closeWaiting();
			    	 },500);
			    						 
			    	},function(){
			    		alert('请求延迟，请检查网络');
			    	});
			    }
				 
				 getMovies();
			})
		</script>
	</body>

</html>
